<template>
    <div class="layout-main-wrap" @click="cleanSelectData" @keydown.ctrl.65.stop="selectAll($event)" @keydown.meta.65.stop="selectAll($event)" @contextmenu.prevent="$refs.pageCtx.open($event)">
        <Top @refreshBatch="refreshBatch"/>
        <div id="_layout_main" class="layout-main">
            <div @mousedown="mousedownfn">
                <Main ref="layoutMain"/>
            </div>
        </div>
        <context-menu id="pageCtx" ref="pageCtx" @ctx-open="onPageCtxOpen" @ctx-cancel="resetPageCtxLocals" @ctx-close="onPageCtxClose">
            <li class="ctx-header" @click="refreshBatch">刷新</li>
        </context-menu>

        <Uploader ref="Uploader" :opts="options" :is="isInitUploader"/>
    </div>
</template>

<script>
    import Top from './top.vue'
    import Main from './list.vue'
    import { array_merge } from "../../utils/utils";
    import Uploader from '../../components/Plugin/Uploader/Uploader'
    import ApiUrl from '../../config/api'


    export default {
        name: "disk_layout",
        components: {
            Top,
            Main,
            Uploader
        },
        data() {
            return {
                isInitUploader: false,
                tempSelect: [],
                options: {
                    target: ApiUrl.UploadApiUrl.upload,
                    chunkSize: 1*1024*1024,
                    simultaneousUploads: 3,
                    headers: {
                        // Authorization: Ticket.get() && "Bearer " + Ticket.get().access_token
                    },
                    query() {},
                    uploadConfig: {}
                },
            }
        },
        methods: {
            getUploadConfig() {
                this.$ajax.get(ApiUrl.UploadApiUrl.getConfig, {}, {}).then(function (ret) {
                    let data = ret.data;
                    if (ret.code == 200) {
                        this.options.target = data.upload_url;
                        this.options.max = data.max;
                        this.options.thread = data.max_upload;
                        this.options.chunkSize = data.chunkSize;
                        this.options.uploadConfig = data;
                        this.isInitUploader = Uploader;
                    } else {

                    }
                }.bind(this));
            },
            cleanSelectData() {
                this.Bus.Batch.selectedData = [];
            },
            mousedownfn(e) {
                let paths = e.path;
                let index = 0;
                for(var item of paths) {
                    if(item.tagName == 'LI') {
                       index++;
                    }
                }
                if(index > 0) {
                    return;
                }
                this.onPageCtxOpen();

                //  创建选框节点
                if(document.body.querySelector(".select-box-dashed") == null) {
                    try {
                        this.selectBoxDashed = document.createElement('div');
                        this.selectBoxDashed.className = 'select-box-dashed';
                        this.selectBoxDashed.id = 'select-box-dashed';
                        document.getElementById('container-group').appendChild(this.selectBoxDashed);
                    } catch (err) {
                        // console.log(err)
                    }
                } else {
                    this.selectBoxDashed = document.getElementById('select-box-dashed');
                }

                this.scrollX = (document.body.scrollLeft) - 240;
                this.scrollY = (document.body.scrollTop) - 113;

                //  设置选框的初始位置
                this.startX = e.x + this.scrollX || e.clientX + this.scrollX;
                this.startY = e.y + this.scrollY || e.clientY + this.scrollY;
                this.selectBoxDashed.style.cssText = `left:${this.startX}px;top:${this.startY}px`;
                try {
                    document.getElementById('select-box-dashed').addEventListener('mousemove', this.mousemovefn)
                    //  清除事件冒泡、捕获
                    // this.clearBubble(e);
                    document.getElementById('container-group').addEventListener('mousemove', this.mousemovefn)
                    document.body.addEventListener('mouseup', this.mouseUpfn)
                } catch (err) {
                    // console.log(err)
                }
            },
            clearBubble(e) {
                if (e.stopPropagation) {
                    e.stopPropagation()
                } else {
                    e.cancelBubble = true
                }
                if (e.preventDefault) {
                    e.preventDefault()
                } else {
                    e.returnValue = false
                }
            },
            mousemovefn(e) {
                //  设置选框可见
                this.selectBoxDashed.style.display = 'block'
                //  根据鼠标移动，设置选框的位置、宽高
                this.initx = e.x + this.scrollX || e.clientX + this.scrollX
                this.inity = e.y + this.scrollY || e.clientY + this.scrollY
                //  暂存选框的位置及宽高，用于将 select-item 选中
                this.left = Math.min(this.initx, this.startX)
                this.top = Math.min(this.inity, this.startY)
                this.width = Math.abs(this.initx - this.startX)
                this.height = Math.abs(this.inity - this.startY)
                this.selectBoxDashed.style.left = `${this.left}px`
                this.selectBoxDashed.style.top = `${this.top}px`
                this.selectBoxDashed.style.width = `${this.width}px`
                this.selectBoxDashed.style.height = `${this.height}px`
                let fileDivs = document.getElementById('container-group').getElementsByTagName('li');
                for (let i = 0; i < fileDivs.length; i++) {
                    let itemX_pos = fileDivs[i].offsetWidth + fileDivs[i].offsetLeft
                    let itemY_pos = fileDivs[i].offsetHeight + fileDivs[i].offsetTop
                    let condition1 = itemX_pos > this.left
                    let condition2 = itemY_pos > this.top
                    let condition3 = fileDivs[i].offsetLeft < (this.left + this.width)
                    let condition4 = fileDivs[i].offsetTop < (this.top + this.height)
                    let id = fileDivs[i].getAttribute('data-id');
                    let type = fileDivs[i].getAttribute('data-type');
                    if (condition1 && condition2 && condition3 && condition4) {
                        this.setTempSelect(id, type);
                    } else {
                        this.setTempSelect(id, type, true);
                    }
                }
                this.clearBubble(e)
            },
            mouseUpfn(e) {
                try {
                    document.getElementById('container-group').removeEventListener('mousemove', this.mousemovefn)
                    document.getElementById('select-box-dashed').removeEventListener('mousemove', this.mousemovefn)
                } catch (err) {
                    // console.log(err)
                }
                if (this.selectBoxDashed) {
                    try {
                        this.selectBoxDashed.parentNode.removeChild(this.selectBoxDashed);
                    } catch (err) {
                        // console.log(err)
                    }
                }
                this.clearBubble(e)
            },
            setTempSelect(id, type, is_del) {
                is_del = is_del || false;
                let AllData = this.Bus.Batch.AllData;
                let is_ext = false;
                if(is_del == false) {
                    for (let item of this.tempSelect) {
                        if(item.id == id && item.type == type) {
                            is_ext = true;
                        }
                    }
                    if(is_ext == false) {
                        for (let item of AllData) {
                            if(item.id == id && item.type == type) {
                                this.tempSelect.push(item);
                            }
                        }
                    }
                    this.Bus.Batch.selectedData = this.tempSelect;
                } else {
                    let newVal = [];
                    for (let item of this.tempSelect) {
                        if(item.id == id && item.type == type) {

                        } else {
                            newVal.push(item);
                        }
                    }
                    this.tempSelect = newVal;
                }
            },
            pushData(id, type, is_del) {
                is_del = is_del || false;
                let AllData = this.Bus.Batch.AllData;
                let selectedData = this.Bus.Batch.selectedData;
                let newVal=selectedData,is_selece=false;

                for (let item of selectedData) {
                    if(item.id == id && item.type == type) {
                        is_selece = true;
                    }
                }

                if(is_selece == false && is_del == false) {
                    for (let item of AllData) {
                        if(item.id == id && item.type == type) {
                            newVal.push(item);
                        }
                    }
                }
                this.Bus.Batch.selectedData = newVal;
            },
            selectAll($event) {
                if ($event.stopPropagation) {
                    $event.stopPropagation()
                }
                if ($event.preventDefault) {
                    $event.preventDefault()
                }
                let datas = array_merge(this.dirList,this.fileList);
                this.selectedData = datas;
                $event.preventDefault();
                return false;
            },
            onPageCtxOpen() {
                let dirCtxDom = document.getElementById('dirCtx');
                let fileCtxDom = document.getElementById('fileCtx');
                dirCtxDom.style.cssText = 'display:none';
                fileCtxDom.style.cssText = 'display:none';
                this.Bus.Batch.selectedData = [];
            },
            onPageCtxClose() {
            },
            resetPageCtxLocals() {
            },
            refreshBatch() {
                this.$refs.layoutMain.pageLoad();
            }
        },
        created() {
            this.getUploadConfig();
        }
    }
</script>

<style scoped lang="less">
    #_layout_main {
        width:100%;
        height: calc(~'100vh - 65px');
    }
    .layout-main-wrap{
        display: inline-block;
        height: 100vh;
        width: calc(~'100vw - 240px');
        margin-left: 240px;
    }
</style>